<template>
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4 group cursor-pointer">
    <!-- 标签 -->
    <div v-if="tool.label && showLabel" class="absolute -top-2 -left-2 z-10">
      <span 
        :class="`${tool.labelColor} text-white text-xs px-2 py-1 rounded-full font-medium`"
      >
        {{ tool.label }}
      </span>
    </div>

    <!-- 刷新按钮 -->
    <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <button class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
        <svg class="w-3 h-3 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
      </button>
    </div>

    <!-- 下拉箭头 (仅语录集-彩虹屁) -->
    <div v-if="showDropdown" class="absolute top-2 right-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <button class="w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
        <svg class="w-3 h-3 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
    </div>

    <!-- 卡片内容 -->
    <div class="flex items-start space-x-3">
      <!-- 图标 -->
      <div :class="`${tool.iconColor} w-10 h-10 rounded-full flex items-center justify-center text-white text-lg font-medium flex-shrink-0`">
        {{ tool.icon }}
      </div>

      <!-- 文字内容 -->
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-1 leading-tight">
          {{ tool.title }}
        </h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
          {{ tool.description }}
        </p>
      </div>
    </div>

    <!-- 悬停效果 -->
    <div class="absolute inset-0 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
  </div>
</template>

<script setup lang="ts">
interface Tool {
  id: string
  title: string
  description: string
  icon: string
  iconColor: string
  label?: string
  labelColor?: string
}

defineProps<{
  tool: Tool
  showLabel?: boolean
  showDropdown?: boolean
}>()
</script>

<style scoped>
/* 自定义样式 */
</style>
